<template>
  <div id="graduateLeave_manage" class="container">
    <div class="content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="title" :to="{ path: '/processing_center/comprehensive' }">办理中心首页</el-breadcrumb-item>
        <el-breadcrumb-item class="title">毕业\离园</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-select
              style="width:2.03rem;float: left;margin-left:.1rem;"
              clearable
              v-model="tabledisplayObj.courseId"
              placeholder="请选择年份"
            >
              <el-option
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              style="width:2.03rem;float: left;margin-left:.1rem;"
              clearable
              v-model="tabledisplayObj.courseId"
              placeholder="请选择类型"
            >
              <el-option
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input
              style="width: 3rem;margin-left:.1rem;"
              placeholder="搜索 学员姓名\手机号\监护人"
              v-model="tabledisplayObj.studentName"
              class="input_search"
              clearable
            ></el-input>
            <div @click="searchCoupon()" class="search_btn" style="margin-left:0.1rem;">搜索</div>
            <div class="right_btn" @click="graduateLeave_add">毕业\离园</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 1rem;">
                  <el-checkbox v-model="checked"></el-checkbox>
                </td>
                <td style="width: 3rem;">学员姓名</td>
                <td style="width: 3rem;">申请日期</td>
                <td style="width: 3rem;">当前所在班级</td>
                <td style="width: 3rem;">毕业\离园日期</td>
                <td style="width: 2rem;">申请</td>
                <td style="width: 3rem;">联系电话</td>
                <td style="width: 3rem;">去向</td>
                <td style="width: 2rem;">状态</td>
                <td style="width: 3rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr>
                <td>
                  <el-checkbox v-model="checked"></el-checkbox>
                </td>
                <td>舒语汐</td>
                <td>小(一)班 托儿班</td>
                <td>2019-12-01</td>
                <td>2019-12-30</td>
                <td>不涉及费用处理</td>
                <td>不涉及费用处理</td>
                <td>
                  <div
                    style="line-height: 0.52rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;"
                  >小孩子太厉害了，得上大学，小学是扭到小时，哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
                </td>
                <td>舒亮</td>
                <td>
                  <span class="operate_btn" style="color:#67C23A;">取消</span>
                  <span class="operate_btn" style="color:#67C23A;">修改</span>
                  <span class="operate_btn" style="color:#67C23A;">查看</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="allCheckClass">
          <el-checkbox
            v-model="checked"
            style="float: left;margin-top:0.1rem;font-size:0.16rem;margin-left:0.2rem;"
          >全选</el-checkbox>
          <div class="download_btn">取消毕业\离园</div>
          <div class="download_btn">修改毕业\离园</div>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
        <graduateLeaveAdd ref="graduateLeaveAdd" @callback="closeAdd"></graduateLeaveAdd>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
let user;
import graduateLeaveAdd from "./common/graduation_leave_add";
export default {
  data() {
    return {
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        total: 0,
        studentName: "",
        courseId: "",
        
      },
      selectCourseList: [],
      checked: true,
      graduateLeaveDataList: [] //毕业学员列表
    };
  },
  components: { graduateLeaveAdd },
  methods: {
    /**新增毕业回调 */
    closeAdd() {},
    /**新增毕业 */
    graduateLeave_add() {
      vm.$refs.graduateLeaveAdd.init({});
    },
    /**
     * 初始化数据
     */
    initData() {
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 抽取出来获取列表
     */
    getData(paras) {},
    pageSizeChange: function(val) {
      //页条数发生改变
      vm.tabledisplayObj.pageSize = val;
      vm.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      vm.tabledisplayObj.currPage = val;
      vm.initData();
    },
    /**
     * 搜索
     */
    searchCoupon() {
      vm.tabledisplayObj.currPage = 1;
      vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    this.initData();
  }
};
</script>

<style lang="scss">
#graduateLeave_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-breadcrumb__separator {
    color: #999999;
  }
  .el-breadcrumb__inner.is-link {
    font-weight: 400;
    color: #141414;
  }
  .el-breadcrumb__inner.is-link:hover {
    color: #3885f8;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #999999;
  }
  .right_btn {
    background-image: url(~@/assets/img/clue_manage/add_white.png);
    width: 1.54rem;
    padding-left: 0.48rem;
    background-position: 0.18rem center;
  }
  .allCheckClass {
    position: relative;
    bottom: -0.1rem;
    left: 0;
    width: 6rem;
    // overflow: hidden;
  }
  .download_btn {
    width: 1.6rem;
    height: 0.38rem;
    line-height: 0.38rem;
    float: left;
    margin-left: 0.1rem;
    font-size: 0.16rem;
    font-weight: bold;
    border-radius: 0.1rem;
    box-shadow: 0 0 0.2rem 0 rgba(56, 133, 248, 0.2);
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    background-color: #259b24;
  }

  .download_btn:hover {
    background-color: rgba(37, 155, 36, 0.8);
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>